<template>
  <div class="page-content">
    <div class="text-right" v-if="isView">
      <el-button size="small" icon="el-icon-printer" :loading="printLoading" @click="printPage">
        打印
      </el-button>
    </div>
    <div :id="printId">
      <h3 class="text-center p-5">“{{ infoData.project_type_name }}”贷款申请表</h3>
      <table class="table table-bordered vertical-align-middle">
        <colgroup>
          <col width="20%" />
          <col width="13%" />
          <col width="13%" />
          <col width="20%" />
          <col width="13%" />
          <col width="20%" />
        </colgroup>
        <tbody>
          <tr>
            <td class="text-center bg-light">企业名称</td>
            <td colspan="5" :class="tdClass" class="text-center">
              <span v-if="isView">{{ infoData.customer_name }}</span>
              <el-input v-else v-model="editData.customer_name" placeholder="企业名称"></el-input>
            </td>
          </tr>
          <tr>
            <td class="text-center bg-light">企业性质</td>
            <td colspan="2" class="text-center" :class="tdClass">
              <span v-if="isView">{{ enumCompanyType[infoData.org_class] }}</span>
              <c-select
                v-else
                v-model="editData.org_class"
                :options="enumCompanyType"
                placeholder="企业性质"
              ></c-select>
            </td>
            <td class="text-center bg-light">级别</td>
            <td colspan="2" class="text-center" :class="tdClass">
              <span v-if="isView">{{ enumCompanyLevel[infoData.lever_type] }}</span>
              <c-select
                v-else
                v-model="editData.lever_type"
                :options="enumCompanyLevel"
                placeholder="级别"
              ></c-select>
            </td>
          </tr>
          <tr>
            <td class="text-center bg-light">联系人</td>
            <td colspan="2" class="text-center" :class="tdClass">
              <span v-if="isView">{{ infoData.corp_name }}</span>
              <el-input v-else v-model="editData.corp_name" placeholder="联系人名称"></el-input>
            </td>
            <td class="text-center bg-light">联系电话</td>
            <td colspan="2" class="text-center" :class="tdClass">
              <span v-if="isView">{{ infoData.mobile_no }}</span>
              <el-input
                v-else
                v-model="editData.mobile_no"
                @change="validatorMobile"
                placeholder="联系电话"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="text-center bg-light">企业简介</td>
            <td colspan="5" :class="tdClass">
              <div class="text-indent write-des" v-if="isView">{{ infoData.project_des }}</div>
              <el-input
                v-else
                placeholder="企业简介"
                type="textarea"
                :rows="5"
                v-model="editData.project_des"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="text-center bg-light">参与“9+3”重点县情况</td>
            <td colspan="5" :class="tdClass">
              <div class="text-indent write-partydes" v-if="isView">
                {{ infoData.party_93_des }}
              </div>
              <el-input
                v-else
                placeholder="参与“9+3”重点县情况"
                type="textarea"
                :rows="5"
                v-model="editData.party_93_des"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="text-center bg-light">
              申报金额
              <div>（万元）</div>
            </td>
            <td colspan="2" class="text-center" :class="tdClass">
              <span v-if="isView">{{ infoData.apply_funds || '-' }} 万元</span>
              <el-input
                v-else
                v-model="editData.apply_funds"
                v-input-number="{ min: 0, fixed: 2 }"
                placeholder="申报金额"
              ></el-input>
            </td>
            <td class="text-center bg-light">申请期限</td>
            <td colspan="2" class="text-center" :class="tdClass">
              <span v-if="isView">{{ infoData.load_years || '-' }} 年</span>
              <div v-else class="d-flex">
                <el-input
                  v-input-number="{ min: 0, max: 10, fixed: 0 }"
                  v-model="editData.load_years"
                  placeholder="申请期限"
                ></el-input>
                <span style="width: 60px">年</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2" class="bottom-write" :class="isCounty ? tdClass : ''">
              <div class="write-title">县 (区) 家禽专班 (或农业农村局) 意见</div>
              <div v-if="isView || !isCounty" class="write-content">
                <div class="text-indent">{{ infoData.county_approval_option }}</div>
              </div>
              <el-input
                v-else
                placeholder="县 (区) 家禽专班 (或农业农村局) 意见"
                type="textarea"
                :rows="5"
                v-model="editData.county_approval_option"
              ></el-input>
              <div>
                <div class="d-flex justify-content-end">
                  <div class="text-nowrap py-3">单位公章：</div>
                  <div class="write-label"></div>
                </div>
                <div class="d-flex justify-content-end">
                  <div class="text-nowrap">负责人签章：</div>
                  <div class="write-label">
                    <span v-if="isView || !isCounty">{{ infoData.county_approval_person }}</span>
                    <span v-else>{{ userName }}</span>
                  </div>
                </div>
                <div class="text-right">
                  <span v-if="isView || !isCounty">
                    {{ $utils.dateFormat(infoData.county_approval_time, 'yyyy年MM月dd日') }}
                  </span>
                  <span v-else>
                    {{ $utils.dateFormat(new Date(), 'yyyy年MM月dd日') }}
                  </span>
                </div>
              </div>
            </td>
            <td colspan="2" class="bottom-write" :class="isCity ? tdClass : ''">
              <div class="write-title">市 (州) 家禽专班 (或农业农村局) 意见</div>
              <div v-if="isView || !isCity" class="write-content">
                <div class="text-indent">{{ infoData.city_approval_option }}</div>
              </div>
              <el-input
                v-else
                placeholder="市 (州) 家禽专班 (或农业农村局) 意见"
                type="textarea"
                :rows="5"
                v-model="editData.city_approval_option"
              ></el-input>
              <div>
                <div class="d-flex justify-content-end">
                  <div class="text-nowrap py-3">单位公章：</div>
                  <div class="write-label"></div>
                </div>
                <div class="d-flex justify-content-end">
                  <div class="text-nowrap">负责人签章：</div>
                  <div class="write-label">
                    <span v-if="isView || !isCity">{{ infoData.city_approval_person }}</span>
                    <span v-else>{{ userName }}</span>
                  </div>
                </div>
                <div class="text-right">
                  <span v-if="isView || !isCity">
                    {{ $utils.dateFormat(infoData.city_approval_time, 'yyyy年MM月dd日') }}
                  </span>
                  <span v-else>
                    {{ $utils.dateFormat(new Date(), 'yyyy年MM月dd日') }}
                  </span>
                </div>
              </div>
            </td>
            <td colspan="2" class="bottom-write" :class="isProvince ? tdClass : ''">
              <div class="write-title">省家禽专班意见</div>
              <div v-if="isView || !isProvince" class="write-content">
                <div class="text-indent">{{ infoData.pro_approval_option }}</div>
              </div>
              <el-input
                v-else
                placeholder="省家禽专班意见"
                type="textarea"
                :rows="9"
                v-model="editData.pro_approval_option"
              ></el-input>
              <div>
                <div class="d-flex justify-content-end">
                  <div class="text-nowrap py-3">单位公章：</div>
                  <div class="write-label"></div>
                </div>
                <div class="d-flex justify-content-end">
                  <div class="text-nowrap">负责人签章：</div>
                  <div class="write-label">
                    <span v-if="isView || !isProvince">{{ infoData.pro_approval_person }}</span>
                    <span v-else>{{ userName }}</span>
                  </div>
                </div>
                <div class="text-right">
                  <span v-if="isView || !isProvince">
                    {{ $utils.dateFormat(infoData.pro_approval_time, 'yyyy年MM月dd日') }}
                  </span>
                  <span v-else>
                    {{ $utils.dateFormat(new Date(), 'yyyy年MM月dd日') }}
                  </span>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="text-center pt-2" v-if="!viewMode">
        <el-button type="primary" :loading="buttonLoading" @click="handleSubmit(1)">
          审批通过
        </el-button>
        <el-button type="danger" :loading="buttonLoading" @click="handleSubmit(2)">
          审批拒绝
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
import { checkPhoneNumber } from '@/common/plugins/validator'
import { enumCompanyType, enumCompanyLevel } from '@/gov/plugins/enum'
export default {
  components: {},
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      enumCompanyType,
      enumCompanyLevel,
      printLoading: false,
      editData: {},
      buttonLoading: false,
    }
  },
  computed: {
    ...mapGetters(['user']),
    level() {
      return +this.user.orgRegionLever
    },
    printId() {
      return `print-recommend-${this.infoData.project_white_list_id}`
    },
    isView() {
      // return true
      return this.viewMode
    },
    tdClass() {
      return this.isView ? '' : 'report-input-td'
    },
    userName() {
      return this.user.realName || this.user.userName
    },
    isCounty() {
      return this.level === 3
    },
    isCity() {
      return this.level === 2
    },
    isProvince() {
      return this.level === 1
    },
  },
  watch: {
    infoData: {
      handler: function () {
        this.editData = { ...this.infoData }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    handleSubmit(status) {
      const data = {}
      const date = this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      if (this.isCounty) {
        if (!this.editData.county_approval_option) {
          return this.$message.warning('请输入审批意见')
        }
        data.county_approval = status
        data.county_approval_time = date
        data.county_approval_person = this.userName
        data.county_approval_option = this.editData.county_approval_option
      } else if (this.isCity) {
        if (!this.editData.city_approval_option) {
          return this.$message.warning('请输入审批意见')
        }
        data.city_approval = status
        data.city_approval_person = this.userName
        data.city_approval_time = date
        data.city_approval_option = this.editData.city_approval_option
      } else if (this.isProvince) {
        if (!this.editData.pro_approval_option) {
          return this.$message.warning('请输入审批意见')
        }
        data.pro_approval_person = this.userName
        data.pro_approval_time = date
        data.pro_approval = status
        data.pro_approval_option = this.editData.pro_approval_option
      }
      data.customer_name = this.editData.customer_name
      data.org_class = this.editData.org_class
      data.lever_type = this.editData.lever_type
      data.corp_name = this.editData.corp_name
      data.mobile_no = this.editData.mobile_no
      data.project_des = this.editData.project_des
      data.party_93_des = this.editData.party_93_des
      data.apply_funds = this.editData.apply_funds
      data.load_years = this.editData.load_years
      if (status === 2) {
        return this.$confirm('确认拒绝?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
        })
          .then(async () => {
            await this.putData(data)
          })
          .catch(() => {})
      }
      if (!data.customer_name) {
        return this.$message.warning('请输入企业名称')
      }
      if (!data.corp_name) {
        return this.$message.warning('请输入联系人名称')
      }
      if (!data.mobile_no) {
        return this.$message.warning('请输入联系电话')
      }
      if (!checkPhoneNumber(data.mobile_no)) {
        return this.$message.warning('联系电话有误，请重新输入')
      }
      if (!data.project_des) {
        return this.$message.warning('请输入企业简介')
      }
      if (!data.party_93_des) {
        return this.$message.warning('参与“9+3”重点县情况')
      }
      this.putData(data)
    },
    putData(data) {
      this.buttonLoading = true
      this.$api
        .updateData(
          this.$serviceName,
          'project_white_list',
          this.editData.project_white_list_id,
          data
        )
        .then(() => {
          this.$message.success('审批完成')
          this.$emit('success')
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
        .finally(() => {
          this.buttonLoading = false
        })
    },
    validatorMobile(mobile) {
      if (!checkPhoneNumber(mobile)) {
        this.$message.warning('手机号码有误，请重新输入')
      }
    },
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        body {font-family: SimSun;}
        .text-indent{text-indent: 2.4rem;}
        .vertical-align-middle td {vertical-align: middle;border-color: black !important;}
        .p-5 {padding: 5rem;}
        .py-3 {padding: 3rem 0px;}
        .page-content {max-width: 820px;margin: 0 auto;font-size: 1.2rem;line-height: 3;}
        .bottom-write { vertical-align: top !important;}
        .write-title {min-height: 2rem;}
        .write-content {min-height: 16rem;}
        .write-label { width: 100px; }
        .text-nowrap {white-space: nowrap}
        .text-right { text-align: right }
        .text-center { text-align: center }
        .write-des { min-height: 8rem; }
        .write-partydes { min-height: 5rem; }
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.write-label {
  width: 100px;
}
.page-content {
  max-width: 770px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.vertical-align-middle td {
  vertical-align: middle;
}

.text-indent {
  text-indent: 2.4rem;
}
.bottom-write {
  vertical-align: top !important;
  .write-content {
    min-height: 16rem;
  }
  .write-title {
    min-height: 5rem;
  }
}
.write-des {
  min-height: 8rem;
}
.write-partydes {
  min-height: 5rem;
}
</style>
